<!-- 小东西 https://juejin.cn/post/7129788202335862791 -->
<template>
	<div class="page" :class="[isDark ? 'dark' : '']">
		<div id="btnWrapper" class="btnWrapper" :class="{ rotateWrap: isRotateWrap }">
			<div class="btn" :class="[!isDark ? 'active' : '']" @click="openLamp">开灯</div>
			<div class="btn" :class="[isDark ? 'active' : '']" @click="closeLamp">关灯</div>
		</div>
	</div>
</template>

<script setup name="switchComponent">
	const isDark = ref(false)
	const isRotateWrap = ref(false)
	const wrapper = document.getElementsByClassName('btnWrapper')
	onMounted(() => {
		wrapper[0].style.setProperty('--groove-left', '12px')
	})
	const openLamp = () => {
		console.log('开灯')
		setTimeout(() => {
			isDark.value = false
		}, 500)
		wrapper[0].style.setProperty('--groove-left', `calc(12px + ${0 * 50}%)`)
		wrapper[0].style.setProperty('--wraper-origin', `${0 === 0 ? '75% top' : '25% top'}`)
		wrapper[0].style.setProperty('--wraper-rotate', `${0 === 0 ? -8 : 8}deg`)
		isRotateWrap.value = true
		setTimeout(() => {
			isRotateWrap.value = false
		}, 550)
	}

	const closeLamp = () => {
		console.log('关灯')
		setTimeout(() => {
			isDark.value = true
		}, 500)
		wrapper[0].style.setProperty('--groove-left', `calc(12px + ${1 * 50}%)`)
		wrapper[0].style.setProperty('--wraper-origin', `${1 === 0 ? '75% top' : '25% top'}`)
		wrapper[0].style.setProperty('--wraper-rotate', `${1 === 0 ? -8 : 8}deg`)
		isRotateWrap.value = true
		setTimeout(() => {
			isRotateWrap.value = false
		}, 550)
	}

	// let wrapper = document.getElementById('btnWrapper')
	//setProperty 方法来设置元素的 CSS 变量，具体的设置包括两个参数：
	//第一个参数是要设置的 CSS 变量的名称，以 -- 开头，比如 --mainColor。
	//第二个参数是要设置的 CSS 变量的值，可以是任意有效的 CSS 值，比如 maincolor 变量的值。
	//整个文档中可以使用 var(--mainColor) 来引用该变量，并将元素的颜色设置为这个值
	/**
 * element.style.setProperty(property, value, priority);
element：要设置样式属性的元素。
property：要设置的样式属性的名称。
value：要设置的样式属性的值。
priority：可选参数，用于设置样式属性的优先级。
 */
	// for (let i = 0; i < btns.length; i++) {
	// 	btns[i].addEventListener('click', function (e) {
	// 		// resetBtn(btns)
	// 		// setTimeout(() => {
	// 		// 	btns[i].className = 'btn active'
	// 		// }, 500)
	// 	})
	// }
	// // 重置按钮类名
	// function resetBtn(btns) {
	// 	for (let i = 0; i < btns.length; i++) {
	// 		setTimeout(() => {
	// 			btns[i].className = 'btn'
	// 		}, 100)
	// 	}
	// }
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.page {
		background-color: #edf1f4;
		perspective: 500px;
		--c-wrap-shadow1: #f5f9fd;
		--c-wrap-shadow2: #d8dbe5;
		--c-wrap-bg: #e2e6eb;
		--c-btn-shadow1: #d9dbe6;
		--c-btn-shadow2: #f5f9fd;
		--c-txt1: #aaa;
		--c-txt2: #111;
		transition: background-color 0.4s linear;
	}
	.dark {
		background-color: #333;
		--c-wrap-shadow1: #292929;
		--c-wrap-shadow2: #202020;
		--c-wrap-bg: #505050;
		--c-btn-shadow1: #323232;
		--c-btn-shadow2: #444;
		--c-txt1: #888;
		--c-txt2: #fff;
	}
	#btnWrapper {
		position: relative;
		width: 380px;
		height: 80px;
		padding: 12px 16px;
		margin: 300px auto 0;
		border-radius: 12px;
		overflow: hidden;
		background-color: var(--c-wrap-bg);
		box-shadow:
			-10px -10px 15px var(--c-wrap-shadow1),
			10px 10px 15px var(--c-wrap-shadow2);
		transform-origin: var(--wraper-origin);
		transition:
			transform 0.4s cubic-bezier(0, 0, 0.48, 1),
			box-shadow 0.4s linear,
			background-color 0.4s linear;
	}
	.rotateWrap {
		transform: rotateY(var(--wraper-rotate));
	}
	#btnWrapper::before {
		content: '';
		position: absolute;
		left: var(--groove-left);
		top: 12px;
		width: calc(50% - 16px - 8px);
		height: calc(100% - 24px);
		border-radius: 12px;
		box-shadow:
			inset 8px 8px 6px var(--c-btn-shadow1),
			inset -5px -5px 15px var(--c-btn-shadow2),
			inset -5px -5px 15px var(--c-btn-shadow2),
			inset 7px 7px 6px var(--c-btn-shadow1);
		transition:
			left 1s cubic-bezier(0.82, 0.12, 0.18, 0.88),
			box-shadow 0.4s linear;
	}
	.btn {
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 50%;
		height: 100%;
		padding: inherit;
		color: var(--c-txt1);
		transition: color 0.4s linear;
		animation: txtOutScale 0.6s linear;
		cursor: pointer;
	}
	.active {
		color: var(--c-txt2);
		transform: scale(1.1);
		animation: txtEnterScale 0.4s linear;
	}
	@keyframes txtEnterScale {
		0% {
			transform: scale(1);
		}

		80% {
			transform: scale(1.15);
		}

		100% {
			transform: scale(1.1);
		}
	}
	@keyframes txtOutScale {
		0% {
			transform: scale(1.1);
		}

		80% {
			transform: scale(0.95);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
